import { useDrop } from 'react-dnd';
import { useState } from 'react';

export default function Bucket() {
  const [{ canDrop, isOver }, drop] = useDrop(() => ({
    // The type (or types) to accept - strings or symbols
    accept: 'Left',
    // Props to collect
    collect: (monitor) => ({
      isOver: monitor.isOver(),
      canDrop: monitor.canDrop(),
    }),
    drop: (item, monitor) => {
      setList((list) => [...list, item]);
    },
  }));
  const [list, setList] = useState<any[]>([]);

  return (
    <div
      ref={drop}
      role={'Dustbin'}
      style={{ backgroundColor: isOver ? 'red' : 'white' }}
    >
      {list.length === 0
        ? 'DcDrop a box here'
        : list.map((item, index) => {
            return (
              <div key={index}>
                {item.text}
                {index}
              </div>
            );
          })}
    </div>
  );
}
